<script setup>
import { add, del, get } from '@renderer/hooks/useDb'
const p = defineProps(['tableName'])
import { request } from '@renderer/utils'
const list = ref([])
const addShow = ref(false)

onMounted(() => {
  getAll()
})

const getAll = () => {
  get(p.tableName).then((result) => ((list.value = result || []), (addShow.value = true)))
}

const openPath = ({ path }) => {
  request('openPath', path)
}

const addDir = () => {
  request('selectDir').then(([path] = []) => {
    if (!path) return
    add(p.tableName, { path }).then(getAll)
  })
}

const deletePath = ({ id }) => {
  del(p.tableName, id).then(getAll)
}
</script>

<template>
  <v-col sm="2" class="w-100 h-100 pr-0">
    <v-sheet border="info thin" color="transparent" class="pr-1 w-100 h-100" style="" rounded>
      <div class="w-100 h-100 scroll-box">
        <TransitionGroup tag="div" name="fade" class="position-relative pa-2 pr-1" style="transition: all 0.5s">
          <div v-for="item in list" :key="item.id" class="mb-2 w-100 cursor-pointer" @click="openPath(item)" @click.right="deletePath(item)">
            <v-hover v-slot="{ isHovering, props }">
              <div
                v-bind="props"
                class="py-1 pl-3 pr-1 rounded-lg d-flex justify-center align-center"
                :class="`elevation-${isHovering ? 10 : 1}`"
                style="background-color: #1a1a1c; transition: all 0.2s; min-height: 2.4rem; word-break: break-all"
              >
                <span class="flex-fill" style="max-width: 100%"> {{ item.path }}</span>
              </div>
            </v-hover>
          </div>
          <div v-if="addShow" key="add">
            <v-hover v-slot="{ isHovering, props }">
              <div
                v-ripple
                v-bind="props"
                class="py-1 px-4 rounded-lg d-flex justify-center align-center cursor-pointer"
                :class="`elevation-${isHovering ? 5 : 1}`"
                style="background-color: #1a1a1c; transition: all 0.2s; min-height: 2.4rem; font-size: 2rem"
                @click="addDir()"
              >
                <i class="pi pi-plus"></i>
              </div>
            </v-hover>
          </div>
        </TransitionGroup>
      </div>
    </v-sheet>
  </v-col>
</template>

<style lang="css" scoped>
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}
.scroll-box {
  overflow: hidden auto;
  max-height: 100%;

  &::-webkit-scrollbar {
    width: 0.6rem;
    cursor: pointer;
  }

  &::-webkit-scrollbar-button {
    height: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #212121;
    border-radius: 8px;
  }
}

.v-sheet {
  overflow: hidden;
}
</style>
